<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html2canvas 插件 html 转 canvas</title>
    <style>
        #canvasContent {
            margin: auto;
            width: 600px !important;
            height: 600px !important;
            color: white;
            text-align: center;
            background-color: sienna;
        }
    </style>
</head>
<body>
<div id="canvasContent">
    <!--特意准备两张网络上的图片-->
    <img src="https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png">
    <img src="https://www.baidu.com/img/flexible/logo/pc/result.png">
    <table border="1" style="border-collapse: collapse;">
        <tr>
            <th>名称</th>
            <th>官网</th>
            <th>性质</th>
        </tr>
        <tr>
            <td>C语言中文网</td>
            <td>http://c.biancheng.net/</td>
            <td>教育</td>
        </tr>
        <tr>
            <td></td>
            <td>http://www.baidu.com/</td>
            <td>搜索</td>
        </tr>
        <tr>
            <td>当当</td>
            <td>http://www.dangdang.com/</td>
            <td>图书</td>
        </tr>
    </table>
    <form action="/example/html5/demo_form.asp" method="get">
        First name:<input type="text" name="fname"/><br/><br/>
        Date: <input type="date" name="user_date"/><br/><br/>
        E-mail: <input type="email" name="userid"/><br/><br/>
        Poop：<select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select><br/><br/>
        <button type="submit">提交</button>
    </form>

    <article>
        <h1>Internet Explorer 9</h1>
        <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
    </article>

    <!--点击按钮后，调用下面的方法-->
    <button onclick="html2Canvas()" style="width: 200px;height: 60px;font-size: 18px">蚩尤后裔，Html 2 Canvas</button>

</div>
<hr/>

</body>

<script type="text/javascript" src="./html2canvas.js"></script>
<script type="text/javascript">
    /**
     * html 转为 Canvas
     * 1、document.body：表示将整个 body 页面转化为 Canvas，可以任意的 Dom 对象
     * 2、如果网页中有跨域的图片，则必须设置 allowTaint: true - 允许交叉源图像污染画布
     * 3、logging: false：为调试目的启用日志记录，开发测试时可以开启，上线后应该设置为 false。
     * 4、then函数中的 canvas 参数是转换成功后的 Canvas 对象，可以做任意的其它操作，比如展示、或者下周、转 PDF 等
     */
    function html2Canvas() {
        html2canvas(document.body, {
            allowTaint: true,
            logging: false
        }).then(function (canvas) {
            //将 Canvas 追加到页面中展示
            document.body.appendChild(canvas);
        });
    }
</script>

</html>